<template>
  <div>
    <button type="button" @click="fn2(messsge)">跑马场</button>
    <button type="button" @click="clearT">停止</button><br />
    <div class="box">{{ messsge }}</div><br>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messsge:
        "夜，夜的那么美丽。有人欢笑，有人却在哭泣。尘封的记忆残留着邂逅的美丽，辗转反侧的我失眠在夜里。",
      timer: 0,
    };
  },
  methods: {
    lunbo1() {
      this.timer = setInterval(() => {
        const arr = [...this.messsge];
        const item = arr.shift("");
        arr.push(item);
        const newStr = arr.join("");
        this.messsge = "";
        this.messsge = newStr;
      }, 300);
    },
    clearT() {
      clearInterval(this.timer);
    },
    fn2() {
      this.timer = setInterval(() => {
        const str1 = this.messsge.slice(0, 1);
        const str2 = this.messsge.slice(1);
        this.messsge = "";
        this.messsge = str2 + str1;
      }, 300);
    },
  },
};
</script>

<style scoped lang="less">
button {
  width: 100px;
  height: 20px;
}
.box {
  margin-top: 20px;
  width: 780px;
  height: 22px;
  border: 2px solid #e0e0e0;
}
</style>
